<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>qq音乐</title>
		<link rel="stylesheet" type="text/css" href="css/qq.css"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css"/>
	</head>
	<body>
		<!--左边点击滑动页面开始-->
		<div class="Sidebar" id="demo">
			<!--8份div开始-->
			
			<div class="one">
				<!--背景图-->
				<div class="line">
					<div class="line_n">
						<img src="img/touxiang.jpg"/>
						<p class="op">Love in my life</p>
						<figure></figure>
						<p class="op1">1关注</p>
						<p class="op2">99+粉丝</p>
						<p class="op3">521好友</p>
						<p class="op4">99+访客</p>
					</div>
				</div>
				<!--背景图结束-->
				<!--下图标开始-->
				<div class="xia">
					<div class="xia1">
						<h2>基本信息</h2>
						<p>音乐口音:Seto、华语流行、欧美流行></p>
						<h1>我的乐库</h1>
					</div>
					<div class="xia2">
						<img src="img/xihuan.jpg"/>
						<p>喜欢</p>
						<span>521首歌曲></span>
					</div>
					
				</div>
				<div class="xia3">
						<img src="img/city.jpg"/>
						<p>city</p>
						<span>1314首歌曲></span>
					</div>
				<!--下图标结束-->
			</div>
			<!--8份div结束-->
			<!--2份div开始-->
			<div class="two" onclick="document.getElementById('demo').style.transform='translate(-200%)'">
			</div>
			<!--2份div结束-->
		</div>
		<!--左边点击滑动页面结束-->
		
		<!-- *********头部开始********* -->
			<div class="top">
				<div class="top_nav">
					<h2 onclick="document.getElementById('demo').style.transform='translate(0px)'">我的</h2>
					<input type="text" placeholder="搜索" />
					<i class="fa fa-navicon" id="dropdown"></i>
				</div>
				
			</div>
			<div class="jin" id="jin">
					<ul>
					<li><a href="#javascript:;">定时关闭</a></li>
					<li><a href="#javascript:;">音乐闹钟</a></li>
					<li><a href="#javascript:;">分享网易云音乐</a></li>
					<li><a href="#javascript:;">关于</a></li>
					</ul>
				</div>
			<!-- *******头部结束******* -->
			<!-- ********点击js下拉菜单开始******* -->
			<script type="text/javascript">
				
				var dropdown = document.getElementById("dropdown");
				var jin = document.getElementById("jin");
				var i = 1;
				dropdown.onclick = function(){
					i++;
					if(i % 2 == 0){
							jin.style.display = "none";
						}else if(i % 2 == 1 ){
							jin.style.display = "block";
						}
				}
			</script>
			<!-- **********点击js下拉菜单结束********* -->
			<!-- **************轮播图开始*/**************** -->
			<section>
		<div id="carouselExampleCaptions" class="carousel slide www" data-ride="carousel">
			  <ol class="carousel-indicators">
			    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
			    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
			  </ol>
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <img src="img/lunbo12.jpg" class="d-block w-100" alt="...">
				</div>
				<div class="carousel-item">
					<img src="img/lunbo11.jpg" class="d-block w-100" alt="...">
				  </div>
				  <div class="carousel-item">
					<img src="img/lunbo8.jpg" class="d-block w-100" alt="...">
				  </div>  
			    <div class="carousel-item">
			      <img src="img/lunbo9.jpg" class="d-block w-100" alt="...">
			    </div>
			    <div class="carousel-item">
			      <img src="img/lunbo7.jpg" class="d-block w-100" alt="...">
			    </div>
			  </div>
			  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
		 	 </a>
		</div>
		<!-- *****************轮播结束************** -->
		<!-- *******************五个小标开始************* -->
		<div class="reader">
				<div class="one">
					<i class="fa fa-user"></i>
				</div>
				<div class="two">
					<i class="fa fa-signal"></i>
				</div>
				<div class="three">
					<i class="fa fa-calendar"></i>
				</div>
				<div class="four">
					<i class="fa fa-podcast"></i>
				</div>
				<div class="five">
					<i class="fa fa-music"></i>
				</div>
		</div>
		<div class="neader">
				<div class="g">
					<p>歌手</p>
				</div>
				<div class="p">
					<p>排行</p>
				</div>
				<div class="f">
					<p>分类歌单</p>
				</div>
				<div class="d">
					<p>电台</p>
				</div>
				<div class="y">
					<p>一起听</p>
				</div>
		</div>
		<!-- ***************五个小标结束************ -->
		<!-- *******************两个图开始************** -->
		<div class="teader">
				<div class="tu1">
					<img src="img/tu1.jpg" alt="">
				</div>
				<div class="tu2">
					<img src="img/tu2.jpg" alt="">
				</div>
		</div>
		<!-- *******************俩个图结束**************** -->
		<!--****************官网小字开始********************-->
		<div class="year">
			<div class="year_left">
				<h2>官方歌单</h2>
			</div>
			<div class="year_right">
				<p>更多</p><span> > </span>
			</div>
		</div>
		<!--******************官网结束***********************-->
		<!--9个图开始-->
		<!--第一个-->
		<div class="datu">
			<div>
				<img src="img/jieta.jpg"/>
			</div>
			<div>
				<img src="img/doutian.jpg"/>
			</div>
			<div>
				<img src="img/leisheng.jpg"/>
			</div>
		</div>
		<div class="zi">
			<div>
				<p>Microhouse：极简<br />律动的微浩室</p>
			</div>
			<div>
				<p>这儿有一份抵御寒<br />冬的秘籍：</p>
			</div>
			<div>
				<p>超燃BGM！隐藏BOSS<br />的霸气出场</p>
			</div>
		</div>
		<!--第一个结束-->
		
		<!--第二个开始-->
		<div class="us">
			<div>
				<img src="img/nansheng.jpg"/>
			</div>
			<div>
				<img src="img/qiutian.jpg"/>
			</div>
			<div>
				<img src="img/xiaonvhai.jpg"/>
			</div>
		</div>
		<div class="mei">
			<div>
				<p>金属说唱 | 用呐喊来告诉你！</p>
			</div>
			<div>
				<p>民谣男声 · 屏蔽纷纷扰扰</p>
			</div>
			<div>
				<p>我喜欢你，可却开不了口</p>
			</div>
		</div>
		<!--第二个结束-->
		<!--第三个开始-->
		<div class="sang">
			<div>
				<img src="img/aiqin.jpg"/>
			</div>
			<div>
				<img src="img/junren.jpg"/>
			</div>
			<div>
				<img src="img/nv.jpg"/>
			</div>
		</div>
		<div class="hao">
			<div>
				<p>仲夏夜之梦 · 天台爱情故事</p>
			</div>
			<div>
				<p>军恋 | 唯钢枪与你不可辜负</p>
			</div>
			<div>
				<p>「粤式情」轻易浮动一个人<br />的心扉</p>
			</div>
		</div>
		<!--第三个结束-->
		<!--9个图结束-->
		</section>
		<!--************音乐播放开始**********-->
		
		<footer>
			<div class="pou">
				<div class="imgs">
					<img src="img/woumen.jpg"/>
				</div>
				<div class="foot">
					<p class="o">最好的我们</p>
					<p class="t">黄子韬</p>
				</div>
				<div class="biao">
					<img src="img/bofang.png"/>
					<img src="img/caidan.png"/>
				</div>
			</div>
		</footer>
		<!--***************音乐播放结束***********-->
	</body>
</html>
